<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script>
        function toggleFields() {
            var identity = document.querySelector('input[name="identity"]:checked').value;
            var patientFields = document.getElementById('patient-fields');
            var doctorFields = document.getElementById('doctor-fields');

            if (identity === 'patient') {
                patientFields.style.display = 'block';
                doctorFields.style.display = 'none';
            } else if (identity === 'doctor') {
                patientFields.style.display = 'none';
                doctorFields.style.display = 'block';
            }
        }

        // 确保在页面加载时调用一次toggleFields，以根据默认选中的值显示正确的字段
        window.onload = function() {
            toggleFields();
        };

        // 添加表单验证函数
        function validateForm() {
            var password = document.querySelector('input[name="password"]').value;
            var identity = document.querySelector('input[name="identity"]:checked').value;
            var phone;

            if (identity === 'patient') {
                phone = document.querySelector('input[name="patient_phone"]').value;
            } else if (identity === 'doctor') {
                phone = document.querySelector('input[name="doctor_phone"]').value;
            }

            if (!password) {
                alert('密码不能为空');
                return false;
            }

            if (!phone) {
                alert('电话号码不能为空');
                return false;
            }

            return true;
        }

    </script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link href="/css/registerstyle.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid tow">
    <form action="/auth/register" method="post" enctype="multipart/form-data" class="formstyle" onsubmit="return validateForm()">
        <h2>注册</h2>
        <div class="form-group">
            <div class="form-group">
                <label>身份：</label>
                <input type="radio" id="patient-radio" name="identity" value="patient" checked onchange="toggleFields()">患者
                <input type="radio" id="doctor-radio" name="identity" value="doctor" onchange="toggleFields()">医生
            </div>
        </div>
        <div class="form-group d-flex">
            <label class="col-2">用户名：</label>
            <input class="form-control" type="text" name="name">
            <label class="col-2">密&nbsp;&nbsp;&nbsp;码：</label>
            <input class="form-control" type="password" name="password">
        </div>
        <!-- 患者特有字段 -->
        <div id="patient-fields" style="display: block;"> <!-- 初始显示患者字段，因为默认选中患者 -->
            <div class="form-group d-flex" >
                <label class="col-2">性&nbsp;&nbsp;&nbsp;别：</label>
                <select class="form-control" name="sex" style="height: 40px">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>

                <label class="col-2">生&nbsp;&nbsp;&nbsp;日：</label>
                <input class="form-control" type="date" name="birthday">
            </div>
            <div class="form-group">
                <label>身份证号码：</label>
                <input class="form-control" type="text" name="cno">
            </div>
            <div class="form-group">
                <label>电话：</label>
                <input class="form-control" type="text" name="patient_phone">
            </div>
            <div class="form-group">
                <label>头像：</label>
                <input class="form-control" type="file" name="patientPhoto">
            </div>
            <div class="form-group">
                <label>地址：</label>
                <input class="form-control" type="text" name="address">
            </div>
        </div>
        <!-- 医生特有字段 -->
        <div id="doctor-fields" style="display: none;">
            <div class="form-group d-flex">
                <label class="col-2">职&nbsp;&nbsp;&nbsp;位：</label>
                <input class="form-control" type="text" name="job">
                <label  class="col-2">挂号费：</label>
                <input class="form-control" type="text" name="fee">
            </div>
            <div class="form-group">
                <label>电话：</label>
                <input class="form-control" type="text" name="doctor_phone">
            </div>
            <div class="form-group">
                <label>简介：</label>
                <input class="form-control" type="text" name="note">
            </div>
            <div class="form-group">
                <label>头像：</label>
                <input class="form-control" type="file" name="doctorPhoto">
            </div>
            <div class="form-group" >
                <label>所在科室名称：</label>
                <select class="form-control" style="height: 50px" name="dName">
                    <option th:each="dp:${departments}" th:value="${dp.id}" th:text="${dp.dName}">
                </select>
            </div>

        </div>
        <div class="form-group">
            <a href="/auth/toLogin">已有账号？去登录</a>
        </div>
        <div class="form-group text-center">
            <input class="btn btn-primary" type="submit" value="注册">
        </div>
    </form>
</div>
</body>
</html>
